<template>
<div class="about">
  <h2>methods、data和setup 之间的关系</h2>
  <h3>1.(setup返回的数据，在methods可以改变，但是在data里面定义的数据 setup 访问不到)</h3>
  <a-button type="primary" @click="test">改变数据(methods)</a-button>||
  <a-button type="primary" @click="change">改变数据(setup)</a-button>
  <p>
    a(setup):{{a.name}}
    <span class="title"></span>
  </p>
  <p>b(data){{b}}</p>
  <h2>computed、watch和setup 之间的关系</h2>
  <p>1.之前的computed 一样可以用，在setup里面,先导入computed，传入get 和set 方法</p>
  <p class="title">我是观察者: {{watcher}}</p>
  <span class="title">computed:</span>
  {{com}}
  <span class="title">setup computed</span>
  :{{con3}}
</div>
</template>

<script>
import {
  computed,
  reactive,
  toRefs
} from "vue";
export default {
  watch: {
    b() {
      this.watcher = `b变化了${this.b}`;
    },
    a: {
      deep: true,
      // immediate: true,
      handler(a) {
        console.log(a.name);
        this.watcher = `a 也变化了${this.a.name}`;
      },
    },
  },
  data() {
    return {
      name: "huo",
      b: 456,
      watcher: "完好无初",
    };
  },
  created() {
    console.log(this.name);
  },
  methods: {
    test() {
      this.a.name += 200;
      this.b += 200;
    },
  },
  setup() {
    const obj = reactive({
      a: {
        name: 123,
      },
    });
    const change = () => {
      obj.a.name++;
    };
    const con3 = computed({
      get: () => {
        return obj.a.name + 1000;
      },
    });
    return {
      ...toRefs(obj),
      change,
      con3,
    };
  },
  mounted() {
    console.log("mounted");
  },
  computed: {
    com() {
      return this.b + 1000;
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 1rem;
  height: 1rem;
  background-color: pink;
}

.box1 {
  width: 10vw;
  height: 10vw;
  background-color: #ccc;
}
</style>
